<template>
  <div class="app-container">
    <div class="main-header">
      <span>欢迎您{{ store.state.userInfo?.userName ?? '游客' }}。今天是星期八</span>
      <el-button size="large" type="danger" @click="logout">
        退出登录
      </el-button>
    </div>
    <div class="split-line"></div>
    <div class="main-content">
      <div class="card mt-30">
        <div v-for="(item, index) in showMenu" :key='index'>
          <div class="cardItem mb-30 mr-30" @click="goTo(item)">
            <Svg :name="item.svg" size="34" :color='getColorRandom()'></Svg>
            <div class="mt-16 cardName">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const store = useStore();
const router = useRouter();
let showMenu = reactive([
  { title: '立库出入库', svg: 'lksxj', path: 'liku' },
  { title: '物料标签打印', svg: 'print', path: 'materialPrint' }
])


const logout = () => {
  store.commit('clearUserInfo', '')
  window.location.href = '/'
}
const getColorRandom = () => {
  // 随机16进制颜色
  let color = '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
  return color;
}
const goTo = (item) => {
  router.push({ path: item.path })
}
onMounted(() => {
  console.log(store.state, '123')
})
</script>

<style lang="less" scoped>
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  max-width: 1024px;
  height: 72px;
  margin: auto;
  padding: 20px 0;
  overflow: hidden;
  font-size: 22px;
}

.main-content {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: 0 auto;
  font-size: 16px;
}

.card {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;

  .cardItem {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    //width: 20%;
    align-items: center;
    text-align: center;

    .cardImg {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      margin: 0 auto;
    }

    .cardName {
      word-break: break-all;
    }
  }
}

.split-line {
  border-bottom: 2px solid #ccc;
}
</style>